<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>DatePicker 日期选择器</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>选择或输入日期，支持年、月、日期等类型，支持选择范围。</p>
                        <div class="anchor">
                            <h2 id="基本日期访问选择器">基本日期访问选择器</h2>
                            <a href="#基本日期访问选择器">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="glyphicon glyphicon-time"></i>
                                                </span>
                                                <input type="text" class="form-control" placeholder="请选择日期" dy8-unit="date" data-format="YYYY-MM-DD" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;
            &lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input type="text" class="form-control" placeholder="请选择日期" dy8-unit="datePicker" data-format="YYYY-MM-DD" /&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                <p>设置属性 dy8-unit 为 date 显示选择单日类型或设置属性 data-single 为 true。</p>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="基本单日期访问选择器">基本双日期访问选择器</h2>
                            <a href="#基本单日期访问选择器">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                                                <input type="text" class="form-control" dy8-unit="daterange" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="input-group"&gt;
        &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;input type="text" class="form-control" dy8-unit="daterange" /&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                <p>设置属性 dy8-unit 为 daterange 显示选择范围类型或设置属性 data-single 为 false。</p>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="日期范围和时间选择器，30分钟增量">日期范围和时间选择器，30分钟增量</h2>
                            <a href="#日期范围和时间选择器，30分钟增量">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                                                <input type="text" class="form-control" dy8-unit="daterange" data-single="false" data-increment="30" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="input-group"&gt;
        &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;input type="text" class="form-control" dy8-unit="daterange" data-single="false" data-increment="30" /&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                设置属性 data-increment 属性值为数字代表增量的值。
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="初始为空的日期选择器">初始为空的日期选择器</h2>
                            <a href="#初始为空的日期选择器">#</a>
                        </div>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-6">
                                            <div class="input-group">
                                                <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                                                <input type="text" class="form-control" dy8-unit="date" data-void="true" data-format="YYYY-MM-DD" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="input-group"&gt;
        &lt;div class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-time"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;input type="text" class="form-control" dy8-unit="date" data-void="true" data-format="YYYY-MM-DD" /&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                设置属性 data-increment 属性值为数字代表增量的值。
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>